<template>
  <div class="home">
      <!-- 头部 -->
      <Head></Head>

      <!-- 轮播 -->
      <Banner/>

      <!-- 瀑布流 -->
      <div class="newest clearfix">
        <Newest :newestInfo="item"  v-for="item in newestInfo" :key="item.id"/>
      </div>
      
      <!-- 文章 -->
      <div class="essay">
        <Essay :essayArr="item" v-for="item in essayInfo" :key="item.id"/>
      </div> 

      <!-- 回到顶部 -->
      <Top/>
    </div>
</template>

<script>

import Newest from '@/components/Newest'
import Essay from '@/components/Essay'
import Banner from './Banner'
import Top from '@/components/Top'
export default {
  data() {
    return {
      essayInfo:[],
      newestInfo:[]
    }
  },
  mounted(){
        this.getEssayInfo()
        this.getNewestInfo()
  },
  methods:{
      // 获取文章信息
      async getEssayInfo(){
          const result = await this.$api.getEssay(10)
          if (result.status == 200) {
              this.essayInfo = result.data
          }
      },
      // 获取瀑布流信息
      async getNewestInfo() {
          const result = await this.$api.getNewest(10)
          if (result.status == 200) {
              this.newestInfo = result.data
          }
      },
      
  },
  components:{
    Banner,Newest,Essay,Top
  }
}
</script>

<style lang="less" scoped>
.essay{
    padding: 0.3rem 0.2rem 1.1rem;
    background-color: white;
    box-shadow: 0 0.03rem 0.08rem rgb(0 0 0 / 10%);
}
</style>